<template>
	<view class="pages-user-reg">
		<mx-navbar :isClearFixed="true" title="完善邮寄信息" />
		<view class="main-addr">
			<view class="form-module">
				<view class="form-cell">
					<view class="fl">
						姓名
					</view>
					<view class="fr">
						<input type="text" placeholder="请输入" v-model="form.name">
					</view>
				</view>
				<view class="form-cell">
					<view class="fl">
						手机
					</view>
					<view class="fr">
						<input type="idcard" placeholder="请输入" v-model="form.phone">
					</view>
				</view>
				<view class="form-cell">
					<view class="fl">
						省市区
					</view>
					<view class="fr" @click="openAddr">
						{{ pca || '请选择' }}
					</view>
					<text class="cuIcon cuIcon-right"></text>
				</view>
				<view class="form-cell address">
					<view class="fl fldz">
						详细地址
					</view>
					<view class="fr">
						<textarea v-model="form.address" maxlength="-1"  placeholder="请输入"></textarea>
					</view>
				</view>
				<view class="form-cell default-cell">
					<view class="fl">
						默认
					</view>
					<view class="fr">
						<switch class='red' @change="changeDefault" :class="form.default == 2?'checked':''" :checked="form.default == 2?true:false"></switch>
					</view>
				</view>

			</view>

			<!-- <view class="agree">
				<view class="ag-box" @click="agree = !agree">
					<text class="dagoucheck" v-if="agree">✓</text>
				</view>
				<text>阅读并同意</text>
				<text style="text-decoration: underline;" @click.stop="goUserDoc">【用户协议】</text>
				<text>和</text>
				<text style="text-decoration: underline;" @click.stop="goDoc">【隐私协议】</text>
			</view> -->

			<view class="btn-group">
				<!-- <view class="sub-btn wx-btn" @click="getWxAddr">
					快速获取微信地址
				</view> -->
				<view class="cun-btn round sub-btn" @click="submit">
					提交
				</view>
			</view>



			<mx-popup v-model="is_area">
				<view class="popup">
					<view class="popup-content">
						<view class="popup-title">
							选择地址
							<view class="pr" @click="cancelAddr">
								取消
							</view>
						</view>
						<view class="addr-tabs">
							<view class="add-p" @click="tabProvince">
								{{ tp || '选择省' }}
							</view>
							<view class="add-p" v-if="tc" @click="tabCity">
								{{ tc || '选择市' }}
							</view>
							<view class="add-p" v-if="ta" @click="tabArea">
								{{ ta || '选择区' }}
							</view>
							<view class="add-p" v-if="ta" @click="tabStreet">
								{{ ts || '选择街道' }}
							</view>

						</view>
						<scroll-view scroll-y class="add-ul" style="height: 600rpx;">
							<view class="li-box" v-if="currType == 1">
								<view class="add-li" :class="currProvince.code == pro.code ? 'act_sel':''" v-for="(pro, pindex) in provinces" :key="pindex"
									@click="selectProvince(pro)">
									{{ pro.name }}
									<text class="cuIcon cuIcon-check" v-if="currProvince.code == pro.code"></text>
								</view>
							</view>
							<view class="li-box" v-if="currType == 2">
								<view class="add-li" :class="currCity.code == cit.code ? 'act_sel':''" v-for="(cit, cindex) in citys" :key="cindex"
									@click="selectCity(cit)">
									{{ cit.name }}
									<text class="cuIcon cuIcon-check" v-if="currCity.code == cit.code"></text>
								</view>
							</view>
							<view class="li-box" v-if="currType == 3">
								<view class="add-li" :class="currArea.code == aitem.code ? 'act_sel':''" v-for="(aitem, aindex) in areas" :key="aindex"
									@click="selectArea(aitem)">
									{{ aitem.name }}
									<text class="cuIcon cuIcon-check" v-if="currArea.code == aitem.code"></text>
								</view>
							</view>
							<view class="li-box" v-if="currType == 4">
								<view class="add-li" :class="currStreet.code == bitem.code ? 'act_sel':''" v-for="(bitem, bindex) in streets" :key="bindex"
									@click="selectStreet(bitem)">
									{{ bitem.name }}
									<text class="cuIcon cuIcon-check" v-if="currStreet.code == bitem.code"></text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</mx-popup>

		</view>
	</view>
</template>

<script setup>
import config from '@/common/config.js'
const env = process.env.NODE_ENV === 'development'
let server = config.default_service
const from = ref(1)
const {
	proxy
} = getCurrentInstance()
const data = reactive({
	provinces: [],
	citys: [],
	areas: [],
	streets: [],
	tp: '',
	tc: '',
	ta: '',
	ts: '',
	currProvince: {},
	currCity: {},
	currArea: {},
	currStreet: {},
	pca: '',
	form: {
		id: '',
		name: '',
		phone: '',
		province_code: '',
		city_code: '',
		area_code: '',
		street_code: '',
		address: '',
		default: 2
	},
	currType: 1,
	iswx: false,
	is_area: false,
	agree: false
})
const {
	is_area,
	provinces,
	citys,
	areas,
	streets,
	form,
	currProvince,
	currCity,
	currArea,
	currStreet,
	pca,
	currType,
	tp,
	tc,
	ta,
	ts,
	agree
} = toRefs(data)

onLoad((options) => {
	if(options.id) {
		data.form.id = options.id
		getDetail()
	}

	from.value = options.from || 1
})

async function getDetail() {
	let res = await proxy.$api('AddrDetail', {
		id: data.form.id
	})
	if(res.code == 0) {
		let info = res.data
		data.form = {
			id: data.form.id,
			name: info.name,
			phone: info.phone,
			province_code: info.province_code,
			city_code: info.city_code,
			area_code: info.area_code,
			street_code: info.street_code,
			address: info.address,
			default: info.default
		}
		data.tp =  info.province
	 	data.tc = info.city
		data.ta = info.area
		data.ts = info.street
		data.currProvince= {
			code: info.province_code,
			name: info.province
		}
		data.currCity= {
			code: info.city_code,
			name: info.city
		}
		data.currArea= {
			code: info.area_code,
			name: info.area
		}
		data.currStreet= {
			code: info.street_code,
			name: info.street
		}
		data.pca = data.currProvince.name + data.currCity.name + data.currArea.name + data.currStreet.name

	}
}

function changeDefault(e) {
	data.form.default = e.detail.value ? 2 : 1
}

const submit = async () => {
	if (!data.form.name) {
		return proxy.$toast('姓名不能为空')
	}
	if (!data.form.phone) {
		return proxy.$toast('手机不能为空')
	}
	if (!data.currProvince.name || !data.currCity.name || !data.currArea.name) {
		return proxy.$toast('请选择省市区街道')
	}
	if (!data.form.address) {
		return proxy.$toast('地址不能为空')
	}

	// if (!data.agree) {
	// 	return proxy.$toast('请同意用户协议和隐私协议')
	// }

	let res = await proxy.$api('AddrSave', {
		name: data.form.name,
		phone: data.form.phone,
		province_code:  data.currProvince.code,
		city_code: data.currCity.code,
		area_code: data.currArea.code,
		street_code: data.currStreet.code,
		address: data.form.address,
		default: data.form.default,
		id: data.form.id
	})
	if (res.code == 0) {
		proxy.$toast('保存成功').then(_=> {
			proxy.$go('back')
		})

		// 订单确认页
		if(from.value == 2) {
			proxy.$store.pay_addr = res.data
		}
	}
}

// 类型-[1:省份,2:城市,3:街道]
const getAddress = async (type, code) => {
	let pdata = {}
	if(type == 2) {
		pdata['province_code'] = code
	}
	if(type == 3) {
		pdata['province_code'] = data.currProvince.code
		pdata['city_code'] = code
	}
	if(type == 4) {
		pdata['province_code'] = data.currProvince.code
		pdata['city_code'] = data.currCity.code
		pdata['area_code'] = code
	}
	let res = await proxy.$api('AddrAreas', pdata, false)
	console.log(res)
	if (res.code == 0) {
		if (type == 1) {
			data.provinces = res.data || []
		}
		if (type == 2) {
			data.citys = res.data || []
		}
		if (type == 3) {
			data.areas = res.data || []
		}
		if (type == 4) {
			data.streets = res.data || []
		}
	}
}
const openAddr = () => {
	if (data.iswx) {
		data.currType = 1
		getAddress(1)
	} else {
		console.log(data.currStreet.name)
		// 判断现有的数据
		if (data.currStreet.name) {
			data.currType = 4
			getAddress(4, data.currArea.code)
		} else if (data.currArea.name) {
			data.currType = 4
			getAddress(4, data.currArea.code)
		} else if (data.currCity.name) {
			data.currType = 3
			getAddress(3, data.currCity.code)
		} else if (data.currProvince.name) {
			data.currType = 2
			getAddress(2, data.currProvince.code)
		} else {
			data.currType = 1
			getAddress(1)
		}

	}

	data.is_area = true
}
function cancelAddr() {
	data.is_area = false
}
const tabProvince = () => {
	data.currType = 1
	getAddress(1)
}
const tabCity = () => {
	data.currType = 2
	getAddress(2, data.currProvince.code)
}
const tabArea = () => {
	data.currType = 3
	getAddress(3, data.currCity.code)
}
const tabStreet = () => {
    data.currType = 4
	getAddress(4, data.currArea.code)
}
const selectProvince = (item) => {
	if (data.currProvince.code != item.code) {
		data.currCity = {}
		data.currArea = {}
		data.currStreet = {}
		data.tc = ''
		data.ta = ''
		data.ts = ''
	}
	data.currProvince = {
		name: item.name,
		code: item.code
	}
	data.tp = item.name
	data.currType = 2
	data.iswx = false
	getAddress(2, item.code)
}
const selectCity = (item) => {
	if (data.currCity.code != item.code) {
		data.currArea = {}
		data.currStreet = {}
		data.ta = ''
		data.ts = ''
	}
	data.currCity = {
		name: item.name,
		code: item.code
	}
	data.tc = item.name
	data.currType = 3
	data.iswx = false
	getAddress(3, item.code)

}
const selectArea = (item) => {
	if (data.currArea.code != item.code) {
		data.currStreet = {}
		data.ts = ''
	}

	data.currArea = {
		name: item.name,
		code: item.code
	}
	data.ta = item.name
	data.iswx = false
	data.currType = 4
	getAddress(4, item.code)
	
}

const selectStreet = (item)=> {
	data.currStreet = {
		name: item.name,
		code: item.code
	}
	data.ts = item.name
	data.iswx = false
	data.is_area = false
	data.pca = data.currProvince.name + data.currCity.name + data.currArea.name + data.currStreet.name

}

// const getWxAddr = () => {
// 	uni.chooseAddress({
// 		success(res) {
// 			data.iswx = true
// 			data.form.consignee_name = res.userName
// 			// data.form.mobile = res.telNumber
// 			data.form.consignee_phone = res.telNumber
// 			data.currProvince.name = res.provinceName
// 			data.currCity.name = res.cityName
// 			data.currArea.name = res.countyName
// 			data.form.address = res.detailInfo
// 			data.pca = data.currProvince.name + data.currCity.name + data.currArea.name
// 		}
// 	})
// }

// const getImg = () => {
// 	uni.chooseImage({
// 		count: 1, //默认9
// 		success: function (imgres) {
// 			let tempPath = imgres.tempFilePaths[0]
// 			if (tempPath.indexOf("jpg") > -1 || tempPath.indexOf("jpeg") > -1 || tempPath.indexOf(
// 				"png") > -1) {
// 				uni.showLoading({
// 					title: '文件上传中'
// 				})
// 				uni.uploadFile({
// 					url: `${env ? server.base_url_dev : server.base_url_prod}/api/utils/upload`, //仅为示例，非真实的接口地址
// 					filePath: tempPath,
// 					name: "file",
// 					formData: {
// 						'name': 'test'
// 					},
// 					success: (res) => {
// 						uni.hideLoading()
// 						if (res.statusCode == 200) {
// 							let res_data
// 							if (typeof res.data === "string") {
// 								res_data = JSON.parse(res.data)
// 							} else {
// 								res_data = res.data || {}
// 							}

// 							if (res_data.state == 'success') {
// 								let img = res_data.data.url || ''
// 								if (img) {
// 									readCard(img)
// 								}
// 							}
// 						}
// 					},
// 					fail: (fail) => {
// 						uni.hideLoading()
// 						return proxy.$toast("保存失败1")
// 					}
// 				})
// 			} else {
// 				return proxy.$toast("图片文件格式错误")
// 			}

// 		}
// 	});
// }

// async function readCard(img) {
// 	uni.showLoading({
// 		title: '身份证识别中'
// 	})
// 	let res = await proxy.$post('readCard', {
// 		img: img
// 	}, false)
// 	uni.hideLoading()
// 	if (res.state === 'success') {
// 		data.form.name = res.data.name || ''
// 		data.form.id_card = res.data.idcard || ''
// 	}
// }
</script>

<style lang="scss" scoped>
.pages-user-reg {
	width: 100%;
	min-height: 100vh;
	background-color: #fff;
}

.main-addr {
	width: 100%;
	height: auto;
	padding: 32rpx;
	font-size: 28rpx;
}

.title {
	padding: 20rpx 0;
	font-size: 30rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-cell {
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ececec;
}

.fl {
	width: 140rpx;
	line-height: 120rpx;

}

.fldz{
	line-height:normal;
	padding-top: 40rpx;
	position: relative;
	top: -2rpx;
}

.fr {
	flex: 1;
	position: relative;
}

.fr input {
	border: none;
	outline: none;
	width: 100%;
	height: 110rpx;
	line-height: 110rpx;
	// display: flex;
	// align-items: center;
}

.fr input:focus,
.fr input:active {
	border: none;
	outline: none;
}


.fr textarea {
	border: none;
	outline: none;
	width: 100%;
	padding-top: 40rpx;
}

.fr textarea:focus,
.fr textarea:active {
	border: none;
	outline: none;
}

.yjt {
	margin-top: 40rpx;
}

.agree {
	display: flex;
	align-items: center;
	margin-top: 84rpx;
	margin-bottom: 44rpx;
}

.ag-box {
	width: 44rpx;
	height: 44rpx;
	border-radius: 8rpx;
	border: 1px solid #ececec;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	.dagoucheck {
		color: #2d6a4a;
		font-size: 36rpx;
		font-weight: 500;
	}
}

.btn-group {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
	margin-top: 80rpx;
}

.sub-btn {

	flex: 1;
	line-height: 90rpx;
	text-align: center;
	color: #fff;
	background-color: $main_color;
	// margin: 0 10rpx;
}

.wx-btn {
	background-color: #000;
	color: #fff;
	margin-right: 20rpx;
}


.tip {
	font-size: 24rpx;
	color: #f00;
	margin-bottom: 24rpx;
}

.popup {
	position: relative;
}

.popup-content {
	width: 100%;
	/* height: 8rpx; */
	background-color: #fff;
}

.popup-title {
	font-size: 28rpx;
	color: #000;
	font-weight: bold;
	text-align: center;
	padding: 32rpx 0;
	position: relative;
}

.pr {
	width: 130rpx;
	text-align: right;
	line-height: 64rpx;
	// border: 1px solid #ececec;
	border-radius: 8rpx;
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	z-index: 2;
	color: #999;
	font-weight: normal;
	// background-color: #ececec;
}

.addr-tabs {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ececec;
	padding: 0 24rpx;

}

.add-p {
	/* min-width: 1.6rpx; */
	max-width: 200rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	/* text-align: center; */
	line-height: 90rpx;
	margin-right: 20rpx;
	/* display: flex;
	            align-items: center;
	            justify-content: center; */
}

.add-ul {
	width: 100%;
	// height: 600rpx;
	// overflow-x: hidden;
	// overflow-y: scroll;
	padding: 32rpx 0;
}

.add-li {
	padding: 20rpx 32rpx;
	width: 100%;
	font-size: 28rpx;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.sm-btn {
	width: 180rpx;
	height: 64rpx;
	background: #2d6a4a;
	border-radius: 8rpx;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: normal;
}

.res-btn {
	width: 180rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 24rpx;
	position: absolute;
	right: 0;
	top: 24rpx;
	z-index: 2;
	background-color: #2d6a4a;
	color: #fff;
	border-color: #2d6a4a;
}

.address{
	height: auto;
	align-items: flex-start;
}
.default-cell{
	border: none;
}
.swi{
	color: #13348b !important;
}

.act_sel{
	color: #13348b;
	.cuIcon{
		color: #13348b;
	}
}

</style>